{% schema %}
{
"name": "Section name",
"settings": [
      {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "The Ultimate Entertainment Space"
    },
  {
      "type": "text",
      "id": "card_1_title",
      "label": "Card-1 Title",
      "default": "HDCP Support"
    },
  {
      "type": "text",
      "id": "card_1_desc",
      "label": "Card-1 Desc",
      "default": "Cast movies and TV shows seamlessly"
    },
    {
      "type": "text",
      "id": "card_2_title",
      "label": "Card-2 Title",
      "default": "5000 mAh battery-Long Lasting"
    },
   {
      "type": "text",
      "id": "button_text",
      "label": "Button Name",
      "default": "Button Name"
    },
]
}
{% endschema %}

{% assign icon_googleMeet = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/google_meet.png?v=1689856399' %}
{% assign icon_youtube =
'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/youtube_8cf59209-edf0-4137-ae6a-b21eebe3a6ad.png?v=1689856455'
%}
{% assign icon_disney = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/disney.png?v=1689856498' %}
{% assign icon_hulu = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/hulu_1.png?v=1689856539' %}
{% assign icon_appleTV = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/apple_TV.png?v=1689856559' %}
{% assign icon_tiktok =
'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/tiktok_5e69307e-3a6b-4af2-a946-184586fbc278.png?v=1689856594' %}
{% assign icon_Prime = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/Prime.png?v=1689000082' %}
{% assign icon_Plex = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/Plex.png?v=1689000083' %}
{% assign icon_Plex = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/Plex.png?v=1689000083' %}
{% assign icon_Ted = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/icon_ted.png?v=1724747909' %}
{% assign icon_l = 'https://cdn.shopify.com/s/files/1/0628/5636/4211/files/icon_8e44f2f5-06a1-4eb9-850e-9c43dfd44a97.png?v=1725070193' %}

{%- style -%}
  .box-{{ section.id }} {
    padding-top: 50px;
    padding-bottom: 47px;
  }
.card-{{ section.id }} {
position: relative;
max-width: 100%;
padding-bottom: 65.74923%;
border-radius: 20px;
background: #F7F7F7;
display: flex;
flex-direction: column;
}

.title-{{ section.id }} {
font-family: HarmonyOS Sans;
font-size: 36px;
font-weight: bold;
line-height: 100%;
text-align: center;
letter-spacing: -1.44px;
color: #000000;
margin-bottom: 52px;
  
}

.card-title-{{ section.id }} {
font-family: HarmonyOS Sans;
font-size: 18px;
font-weight: bold;
line-height: 120%;
letter-spacing: -0.56px;
color: #000000;
  margin-top: 20px;
}

.card-desc-{{ section.id }} {
font-family: HarmonyOS Sans;
font-size: 14px;
font-weight: normal;
  width: 206px;
line-height: 120%;
letter-spacing: -0.56px;
font-variation-settings: "opsz" auto;
color: #86868B;
}

.card-img-1-support-{{ section.id }} {
  width: 85.32%;
  height: 49.30%;
  position: absolute;
  left: 16.819%;
  bottom: 3.3254%;
}
.card-img-1-petal-{{ section.id }} {
position: absolute;
top: 26.51%;
left: 62.99%;
width: 17.43%;
height: 20%;
}

.btn-box-{{section.id}} {
display: flex;
justify-content: center;
align-items: center;
}
.card-icon-{{ section.id }} {
overflow: hidden;
position: relative;
padding-bottom: 131.49847%;
border-radius: 20px;
background: linear-gradient(180deg, #E1EDFA 0%, #EEECFB 100%);
}
.card-icon-hand-img-{{ section.id }} {
position: absolute;
bottom: 0;
left: 17.125%;
height: 61.21%;
z-index: 1;
}
.icon-1 {
position: absolute;
left: 43.72%;
top: 5.19%;
width: 11.74%;
height: 11.74%;
opacity: 1;
}
.icon-2 {
position: absolute;
left: 16.65%;
top: 3.975%;
width: 19.51%;
height: 19.51%;
opacity: 1;
}
.icon-3 {
position: absolute;
left: 51.07%;
top: 21.40%;
width: 13.76%;
height: 13.76%;
opacity: 1;
}
.icon-4 {
position: absolute;
left: 85.62%;
top: 41.56%;
width: 8.38%;
height: 8.38%;
opacity: 1;
}
.icon-5 {
position: absolute;
left: 24.77%;
top: 26.29%;
width: 15.10%;
height: 15.10%;
opacity: 1;
}
.icon-6 {
position: absolute;
left: 63.19%;
top: 0;
width: 18.48%;
height: 18.48%;
opacity: 1;
}
.icon-7 {
position: absolute;
left: 84.09%;
top: 12.67%;
width: 9.78%;
height: 9.78%;
opacity: 1;
}
.icon-8 {
position: absolute;
left: 5.81%;
top: 23.24%;
width: 14.06%;
height: 14.06%;
opacity: 1;
}
.icon-9 {
position: absolute;
right: 13.27%;
top: 23.24%;
width: 15.44%;
height: 15.44%;
opacity: 1;
}
  .icon-10 {
position: absolute;
left: 14.67%;
top: 41.66%;
width: 11%;
height: 11%;
opacity: 1;
}
.card-icon-img-box-{{ section.id }} {
width: 100%;
height: 76.7441%;
position: relative;
}
.card-icon-top-box-{{ section.id }} {
width: 100%;
height:23.2558%;
  padding-top: 20px;
}
.pic-animation {
transition: all 0.8s 0.3s ease-in-out;
}
.card-icon-img-box-{{ section.id }} svg {
width: 100%;
height: 100%;
}
.svg-1 {
left: 16.81%;
top: calc(100% - 33.63%);
width: 1.05%;
height: 1.05%;
opacity: 1;
}

.svg-2 {
left: 20.79%;
top: calc(100% - 27.57%);
width: 3.97%;
height: 3.97%;
opacity: 1;
}

.svg-3 {
left: 60.79%;
top: calc(100% - 62.57%);
width: 2.14%;
height: 2.14%;
opacity: 1;
}

.svg-4 {
left: 64.79%;
top: calc(100% - 60.57%);
width: 1.14%;
height: 1.14%;
opacity: 1;
}

.svg-5 {
left: 75.84%;
top: calc(100% - 40.36%);
width: 1.529%;
height: 1.529%;
opacity: 1;
}

.svg-6 {
left: 79.51%;
top: calc(100% - 34.24%);
width: 4.58%;
height: 4.58%;
opacity: 1;
}

.svg-7 {
left: 84.79%;
top: calc(100% - 42.57%);
width: 1.14%;
height: 1.14%;
opacity: 1;
}

.card-icon-top-box-text-{{ section.id }} {

font-family: HarmonyOS Sans;
font-size: 18px;
font-weight: bold;
line-height: 120%;
letter-spacing: -0.56px;

color: #000000;
}
.card-icon-top-box-img-{{ section.id }} {
width: 44.34%;
}

.card-{{ section.id }} .list-group-item{
background: transparent;
display: flex;
align-items: center;
padding-left: 0;
}
.card-{{ section.id }} .list-group-item-text {
font-family: HarmonyOS Sans;
font-size: 30px;
font-weight: bold;
line-height: 120%;
text-align: center;
letter-spacing: 0px;

background: linear-gradient(90deg, #6994FF 7%, #6A94FF 41%, #B584FF 74%, #C6B3FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.card-{{ section.id }} .list-group-item-unit {
font-family: HarmonyOS Sans;
font-size: 16px;
font-weight: bold;
line-height: 120%;
text-align: center;
letter-spacing: 0px;

background: linear-gradient(90deg, #B584FF 0%, #C6B3FF 99%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.card-battery-{{section.id}} {
display: flex;
align-items: center;
}
.card-battery-img-{{section.id}} {
      width: 56.2691%;
}

  .card-battery-img-{{section.id}} img {
    width: 100%;
    
  }
.card-battery-{{section.id}} .list-group {
flex: auto;
}
    .list-{{ section.id }} {
    flex: auto;
  }

  .anim-remove {
position: absolute;
opacity: 0;
top: 69.39%;
left: 40%;
}
  .list-item-{{ section.id }} {
    border-bottom: solid 1px #E6E6E6;
  }
   .list-item-{{ section.id }}:nth-child(3) {
     border-bottom: none;
   }
   .card-title-2-{{ section.id }} {
     margin-bottom: 24px;
   }
{%- endstyle -%}

<div class="bg-white position-relative">
<div class="box-{{ section.id }} container">
  <div class="title-{{ section.id }} anim">{{ section.settings.title }}</div>
  <div class="row gx-4 gy-0">
    <div class="col col-12 col-md-6 mb-4 mb-md-0">
      <div class="row gx-0 ">
         <div class="col col-12 mb-4"><div class="card-{{ section.id }} anim">
        <div class="px-4 px-xl-6 position-absolute top-0 start-0 end-0 bottom-0">
          <div class="card-title-{{ section.id }} mb-2  ">{{ section.settings.card_1_title }}</div>
          <div class="card-desc-{{ section.id }} mb-2  ">{{ section.settings.card_1_desc }}</div>
          <img class="card-img-1-petal-{{ section.id }}  "
            src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_HDCP_Support_petal.png?v=1724742339">
          <img class="card-img-1-support-{{ section.id }}"
            src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_HDCP_Support.png?v=1724741948">
        </div>

      </div></div>
      <div class="col col-12"><div class="card-{{ section.id }} anim">
        <div class="px-4 px-xl-6 position-absolute top-0 start-0 end-0 bottom-0">
          <div class="card-title-{{ section.id }} card-title-2-{{ section.id }}">{{ section.settings.card_2_title }}</div>
          <div class="card-battery-{{section.id}}">
            <div class="list-{{ section.id }} me-4 me-xl-4">
              <div class="list-item-{{ section.id }} d-flex align-items-center py-1 py-xl-3">
                <div class="list-group-item-text me-2" id="number-1-{{ section.id }}">5000</div>
                <div class="list-group-item-unit">mAh</div>
              </div>
             <div class="list-item-{{ section.id }} d-flex align-items-center py-1 py-xl-3">
                <div class="list-group-item-text me-2" id="number-2-{{ section.id }}">5</div>
                <div class="list-group-item-unit">hours</div>
              </div>
              <div class="list-item-{{ section.id }} d-flex align-items-center py-1 py-xl-3">
                <div class="list-group-item-text me-2" id="number-3-{{ section.id }}">7</div>
                <div class="list-group-item-unit">days</div>
              </div>
            </div>
            <div class="card-battery-img-{{section.id}}">
               <img
              src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/battery.png?v=1724762493">
            </div>
           
          </div>
        </div>
          
        </div></div>
      </div>
      </div>
     
      <div class="col-12 col-md-6 ">
        <div class="row g-0 h-100">
          <div class="card-icon-{{ section.id }} anim">
          <div class="position-absolute top-0 start-0 end-0 bottom-0">
          <div class="card-icon-top-box-{{ section.id }} px-4 px-xl-6">
            <img class="card-icon-top-box-img-{{ section.id }} mb-2"
              src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/Google_Play_7892b4d0-b2aa-4246-98f5-5669ac1acfa0.png?v=1724761488">
            <div class="card-icon-top-box-text-{{ section.id }}">on a Whole New Scale</div>
          </div>
          <div class="card-icon-img-box-{{ section.id }}">
            <img class="card-icon-hand-img-{{ section.id }} anim"
              src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/20240831.png?v=1725069802">
  
            <div class="position-absolute init-style anim-remove svg-1 as-icon-pic pic-animation ">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M8.00031 15.9997C9.58557 15.9996 11.1351 15.5286 12.4521 14.6464C13.7692 13.7642 14.7945 12.5106 15.3979 11.0447C16.0012 9.57876 16.1555 7.96665 15.841 6.41293C15.5266 4.85921 14.7576 3.43394 13.6317 2.31802C12.5057 1.20209 11.0737 0.445819 9.51718 0.145184C7.9607 -0.15545 6.34998 0.013108 4.88947 0.629467C3.42895 1.24583 2.18448 2.2822 1.31401 3.60704C0.443526 4.93189 -0.0137154 6.48548 0.000313398 8.07064C0.000271654 9.11788 0.20769 10.1548 0.610589 11.1214C1.01349 12.088 1.60388 12.9653 2.34769 13.7025C3.0915 14.4397 3.97399 15.0223 4.94419 15.4166C5.91439 15.8108 6.95309 16.009 8.00031 15.9997Z"
                  fill="#1ED760"></path>
              </svg>
            </div>
            <div class="position-absolute init-style anim-remove svg-2 as-icon-pic pic-animation ">
              <svg width="43" height="44" viewBox="0 0 43 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M19.6539 1.42908C20.3378 -0.211658 22.6622 -0.211658 23.3461 1.42908L28.5006 13.7958C28.6996 14.2733 29.0759 14.6551 29.5504 14.861L41.7726 20.1653C43.3776 20.8619 43.3776 23.1381 41.7726 23.8347L29.5504 29.139C29.0759 29.3449 28.6996 29.7267 28.5006 30.2042L23.3461 42.5709C22.6622 44.2117 20.3378 44.2117 19.6539 42.5709L14.4994 30.2042C14.3004 29.7267 13.9241 29.3449 13.4496 29.139L1.22743 23.8347C-0.377592 23.1381 -0.37759 20.8619 1.22743 20.1653L13.4496 14.861C13.9241 14.6551 14.3004 14.2733 14.4994 13.7958L19.6539 1.42908Z"
                  fill="#DD0000"></path>
              </svg>
            </div>
            <div class="position-absolute init-style anim-remove svg-3 as-icon-pic pic-animation ">
              <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="-0.149902" y="14.5938" width="20.6394" height="20.6394" rx="1"
                  transform="rotate(-45 -0.149902 14.5938)" fill="#1A98FF"></rect>
              </svg>
            </div>
            <div class="position-absolute init-style anim-remove svg-4 as-icon-pic pic-animation ">
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M5 10C5.9889 10 6.9556 9.70676 7.77785 9.15735C8.6001 8.60794 9.24096 7.82705 9.6194 6.91342C9.99783 5.99979 10.0969 4.99445 9.90392 4.02455C9.711 3.05464 9.23479 2.16373 8.53553 1.46447C7.83627 0.765205 6.94535 0.289002 5.97545 0.0960758C5.00555 -0.0968503 4.00021 0.00216659 3.08658 0.380605C2.17295 0.759043 1.39206 1.3999 0.842651 2.22215C0.293244 3.0444 0 4.01109 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C2.40215 9.47322 3.67392 10 5 10Z"
                  fill="#BB0021"></path>
              </svg>
            </div>
  
            <div class="position-absolute init-style anim-remove svg-5 as-icon-pic pic-animation ">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect y="12.3301" width="16.8554" height="16.8554" rx="1" transform="rotate(-45 0 12.3301)"
                  fill="#BB0021"></rect>
              </svg>
            </div>
  
            <div class="position-absolute init-style anim-remove svg-6 as-icon-pic pic-animation ">
              <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M22.2737 1.95055C23.0461 0.630509 24.954 0.630513 25.7263 1.95056L32.9634 14.3204C33.1367 14.6166 33.3834 14.8633 33.6796 15.0366L46.0494 22.2737C47.3695 23.0461 47.3695 24.954 46.0494 25.7263L33.6796 32.9634C33.3834 33.1367 33.1367 33.3834 32.9634 33.6796L25.7263 46.0494C24.9539 47.3695 23.046 47.3695 22.2737 46.0494L15.0366 33.6796C14.8633 33.3834 14.6166 33.1367 14.3204 32.9634L1.95055 25.7263C0.630509 24.9539 0.630513 23.046 1.95056 22.2737L14.3204 15.0366C14.6166 14.8633 14.8633 14.6166 15.0366 14.3204L22.2737 1.95055Z"
                  fill="#1A98FF"></path>
              </svg>
            </div>
  
            <div class="position-absolute init-style anim-remove svg-7 as-icon-pic pic-animation ">
              <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M4.00016 7.99984C4.79278 7.99981 5.56753 7.7643 6.22607 7.3232C6.88461 6.88209 7.39726 6.25529 7.69894 5.52234C8.00062 4.78938 8.07774 3.98332 7.92051 3.20646C7.76328 2.42961 7.37878 1.71697 6.81583 1.15901C6.25287 0.601045 5.53683 0.222909 4.75859 0.0725922C3.98035 -0.0777249 3.17499 0.00655402 2.44473 0.314734C1.71447 0.622913 1.09224 1.1411 0.657003 1.80352C0.221763 2.46594 -0.00685769 3.24274 0.000156699 4.03532C0.000135827 4.55894 0.103845 5.07738 0.305295 5.5607C0.506744 6.04402 0.801942 6.48264 1.17385 6.85125C1.54575 7.21985 1.987 7.51114 2.4721 7.70828C2.9572 7.90542 3.47655 8.00452 4.00016 7.99984Z"
                  fill="#1D428A"></path>
              </svg>
            </div>
  
            <div class="position-absolute init-style icon-1 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_Prime }}" alt="Prime video logo" loading="lazy">
              </picture>
            </div>
  
            <div class="position-absolute init-style icon-2 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_youtube }}" alt="YouTube logo" loading="lazy">
              </picture>
            </div>
  
            <div class="position-absolute init-style icon-3 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_disney }}" alt="Disney+ logo" loading="lazy">
              </picture>
            </div>
            <div class="position-absolute init-style icon-4 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_hulu }}" alt="hulu logo" loading="lazy">
              </picture>
            </div>
            <div class="position-absolute init-style icon-5 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_googleMeet }}" alt="Google meet logo" loading="lazy">
              </picture>
            </div>
  
            <div class="position-absolute init-style icon-6 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_appleTV }}" alt="Apple TV logo" loading="lazy">
              </picture>
            </div>
            <div class="position-absolute init-style icon-7 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_tiktok }}" alt="TikTok logo" loading="lazy">
              </picture>
            </div>
            <div class="position-absolute init-style icon-8 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_Plex }}" alt="Plex logo" loading="lazy">
              </picture>
            </div>
            <div class="position-absolute init-style icon-9 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_Ted }}" alt="TED logo" loading="lazy">
              </picture>
            </div>
            <div class="position-absolute init-style icon-10 as-icon-pic anim-remove pic-animation ">
              <picture>
                <img class="object-fit-cover w-100" src="{{ icon_l }}" alt="logo" loading="lazy">
              </picture>
            </div>
          </div>
            </div>
        </div>
          
        </div>
        
      </div>
    </div>
  </div>
  
  <div class="btn-box-{{section.id}} pb-7 position-relative">
    <button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas"
      data-bs-target="#offcanvasBottom-{{ section.id }}" aria-controls="offcanvasBottom">
      {{ section.settings.button_text }}
    </button>
  </div>

  <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom-{{ section.id }}"
    aria-labelledby="offcanvasBottomLabel" style="height: 90vh;">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasBottomLabel"></h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body small offcanvas-body-{{ section.id }} pb-4">
      <div class="container">
        <h3>Max 2</h3>
      <ul class="list-group list-group-flush mb-4">
        <li class="list-group-item pb-0 pt-3">
          <h5>Weight</h5>
          <p>75g</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Display</h5>
          <p>Optical Design：birdbath</p>
          <p>Resolution: Single-eye 1080P/1200P</p>
          <p>Maximum Refresh Rate: 120Hz</p>
          <p>Maximum Perceived Brightness: 600 nits</p>
          <p>Contrast Ratio: 100,000:1</p>
          <p>Approximately 50-degree field of view (FoV)</p>
          <p>Refractive Error: 0 to 600</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Audio</h5>
          <p>2 Near-Ear Directional Speakers</p>
          <p>High-Performance Noise-Cancelling Microphones x2</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>User Control</h5>
          <p>Volume Up/Down Keys</p>
          <p>Brightness Adjustment Keys</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Sensors</h5>
          <p>Distance Sensor</p>
          <p>Supports IMU</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Scalability</h5>
          <p>Supports HDCP</p>
        </li>
      </ul>
      <h3>Rokid Station</h3>
      <ul class="list-group list-group-flush">
        <li class="list-group-item pb-0 pt-3">
          <h5>Battery Life</h5>
          <p>5 hours</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Standby Time</h5>
          <p>7 days</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Size</h5>
          <p>38.1 x 30.5 x 20.3 cm</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>CPU</h5>
          <p>64-bit quad-core ARM processor</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Memory</h5>
          <p>2GB</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Flash Memory</h5>
          <p>32GB</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Battery Capacity</h5>
          <p>5000mAh</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Wi-Fi</h5>
          <p>Wi-Fi5</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Bluetooth</h5>
          <p>Bluetooth 5.0</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Interface</h5>
          <p>supports DP output</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Wireless Screen Mirroring</h5>
          <p>supports mirroring via Miracast/DLNA/Airplay</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Color</h5>
          <p>Space Blue</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Controller Type</h5>
          <p>Remote Control</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Connector Type</h5>
          <p>USB/ Micro HDMI</p>
        </li>
        <li class="list-group-item pb-0 pt-3">
          <h5>Special Functions</h5>
          <p>
            Support video website 3D viewing/3D movie file import/network disk 3D movie file, Android TV, Cloud office,
            Wireless screen projection
          </p>
        </li>
      </ul>
      </div>  
    </div>
  </div>

</div>
<script type="module">
  import { CountUp } from "{{ 'countUp.min.js' | asset_url }}";
  document.addEventListener('DOMContentLoaded', function () {
  let flag = [0, 0, 0]
  const targetDiv1 = document.getElementById('number-1-{{ section.id }}');
    const targetDiv2 = document.getElementById('number-2-{{ section.id }}');
    const targetDiv3 = document.getElementById('number-3-{{ section.id }}');
  const countUps = []
    const targetList = [targetDiv1, targetDiv2, targetDiv3];
    
    targetList.forEach((targetDiv, index) => {
        const countUp = new CountUp(`number-${index+1}-{{ section.id }}`, [5000, 5, 7][index], {
          separator: "",
          onCompleteCallback: () => {
            flag[index] = 2;
          },
          onStartCallback: () => {
            flag[index] = 1;
          }
        });
      countUps.push(countUp)
    })
  function addClassWhenInCenter() {
    
    
    if (!targetDiv1) return;
    targetList.forEach((targetDiv, index) => {
          const countUp = countUps[index]
        const viewportHeight = window.innerHeight;
        const targetRect = targetDiv.getBoundingClientRect();
        const targetTop = targetRect.top;
        const targetBottom = targetRect.bottom;
    
        if (targetTop < viewportHeight && targetBottom > 0) {
          flag[index] == 0 && countUp.start();
        } else if (targetTop > viewportHeight || targetBottom < 0) {
          flag[index] ==2 && countUp.reset();
            flag[index] = 0;
          
        }
    })
  }

  window.addEventListener('scroll', addClassWhenInCenter);
  addClassWhenInCenter();
  })
</script>

<style>
  @media (min-width: 1280px) {
  .box-{{ section.id }} {
    padding-top: 140px!important;
    padding-bottom: 100px!important;
  }
  .title-{{ section.id }} {
    font-size: 70px;
    margin-bottom: 88px;
      white-space: nowrap;
  }
  .card-desc-{{ section.id }} {
    font-size: 1.25rem;
    width:auto;
  }
  .card-title-{{ section.id }} {
    margin-bottom: 12px!important;
    margin-top: 32px!important;
  }
  .card-title-{{ section.id }}, .card-icon-top-box-text-{{ section.id }} {
    font-size: 1.5rem;
  }
  .list-item-{{ section.id }} .list-group-item-text {
     font-size: 2.4rem;
  }
  .list-item-{{ section.id }} .list-group-item-unit {
     font-size: 1.2rem;
  }
  .card-img-1-support-{{ section.id }} {
    left :11.77%;
  }
  .card-img-1-petal-{{ section.id }} {
    width: 16.358%;
    height: 19.239%;
    position: absolute;
    left: 50%;
    top: 31.3%;
    transform: translateX(-50%);
  }
  .card-title-2-{{ section.id }} {
     margin-bottom: 57px;
  }
  .card-icon-top-box-{{ section.id }} {
    padding-top: 32px;
  }
  .btn-box-{{section.id}} .btn {
           height: 72px !important;
        font-size: 28px;
  }
  .btn-box-{{ section.id }} {
    padding-bottom: 100px;
  }
  .card-battery-{{ section.id }} {
    margin-top: 24px!important;
  }
   .card-battery-img-{{ section.id }}  {
      transform: scale(1.15) translateX(40px) translateY(-20px)  ;
    }
}
@media (min-width: 1440px) {
  .box-{{ section.id }} {
    padding-top: 140px!important;
    padding-bottom: 100px!important;
  }
  .title-{{ section.id }} {
    font-size: 70px;
    margin-bottom: 88px;
      white-space: nowrap;
  }
  .card-desc-{{ section.id }} {
    font-size: 1.25rem;
    width:auto;
  }
  .card-title-{{ section.id }} {
    margin-bottom: 12px!important;
    margin-top: 32px!important;
  }
  .card-title-{{ section.id }}, .card-icon-top-box-text-{{ section.id }} {
    font-size: 1.5rem;
  }
  .list-item-{{ section.id }} .list-group-item-text {
     font-size: 3.5rem;
  }
  .list-item-{{ section.id }} .list-group-item-unit {
     font-size: 1.5rem;
  }
  .card-img-1-support-{{ section.id }} {
    left :11.77%;
  }
  .card-img-1-petal-{{ section.id }} {
    width: 16.358%;
    height: 19.239%;
    position: absolute;
    left: 50%;
    top: 31.3%;
    transform: translateX(-50%);
  }
  .card-title-2-{{ section.id }} {
     margin-bottom: 57px;
  }
  .card-icon-top-box-{{ section.id }} {
    padding-top: 32px;
  }
  .btn-box-{{section.id}} .btn {
              height: 72px !important;
        font-size: 28px;
  }
  .btn-box-{{ section.id }} {
    padding-bottom: 100px;
  }
  .card-battery-{{ section.id }} {
    margin-top: 57px!important;
  }
     .card-battery-img-{{ section.id }}  {
      transform: scale(1.15) translateX(40px) translateY(-20px) ;
    }
}
</style>